<template>
  <div class="page-container">
    <div ref="plantRef" class="container-charts"></div>
  </div>
</template>
  
  <script>
import { line } from "../request/api";
export default {
  data() {
    return {
      xData: [],
      seriesData: [],
      ydata: [],
      a: [],
    };
  },
  computed:{
    getTheme(){
      return this.$store.state.theme
    }
  },
  watch:{
    getTheme(){
      this.info.dispose()
      this.initEcharts()
      this.getData()
      this.screen()
    }
  },
  mounted() {
    //   console.log(line);
    //组件一加载就调用当图表事件
    this.initEcharts();
    //组件一加载执行数据
    this.getData();
    //组件一加载就执行响应数据的方法
    this.screen();
    //设置监听事件
    window.addEventListener("resize", this.screen);
  },
  destroyed() {
    //销毁封装好的监听器
    window.removeEventListener("resize", this.screen);
  },
  methods: {
    //封装一个初始化图表的事件
    initEcharts() {
      let dom = this.$refs.plantRef;
      let myChart = this.$echarts.init(dom,this.getTheme);
      this.info = myChart;
      let options = {
        title: {
          text: "主要地区农作物种植增长趋势", //主标题
          textStyle: {
            color: "#333",
            // fontSize: 30,
          },
        },
        legend: {
          show: true,
          icon: "circle",
        },
        tooltip: {
          trigger: "axis",
        },
        //图表窗口的边距调整
        grid: {
          left: "15%",
          top: "20%",
          right: "10%",
          bottom: "10%",
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          data: this.xData[0],
        },
        series: [
          {
            type: "line",
            data: this.a,
          },
        ],
      };
      myChart.setOption(options);
    },
    //抽离数据
    async getData() {
      //直接调用接口
      let res = await line();
      this.ydata = res.data.map((item) => item.city);
      this.xData = res.data.map((item) =>
        item.content.map((item) => item.month)
      );
      this.seriesData = res.data.map((item) =>
        item.content.map((item) => item.area)
      );
      (this.a = this.seriesData.map((item, i) => {
        return {
          name: this.ydata[i],
          type: "line",
          radius: 100,
          stack: "Total",
          smooth: true,
          data: item,
        };
      })),
        this.info.setOption({
          xAxis: {
            type: "category",
            data: this.xData[0],
          },
          legend: {
            data: this.ydata,
            top: 40,
            left:20
          },
          series: this.a,
        });
    },

    //封装一个图表大小响应的事件
    screen() {
      //调用提供的内置的屏幕响应大小方法
      // console.log(this.info,'图表方法')
      this.info.resize();
      let width = this.$refs.plantRef.offsetWidth;
      let fontNum = (width / 100) * 5;
      // console.log(width,'99999999')
      this.info.setOption({
        title: {
          textStyle: {
            fontSize: fontNum,
          },
        },
      });
    },
  },
};
</script>
  
  <style lang="less" scoped></style>
  